<template>
  <!--柱状图  -->
  <div ref="index" class="index"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, reactive, watch, nextTick } from "vue";
// 接收值
let props = defineProps({
  carData: {
    type: Object,
    default: false,
  },
});

// 定义值
let index = ref(); //ref的应用
let xAxis = ["死因", "伤情", "DNA", "指纹", "足迹", "毒物"];
let data1 = [498, 520, 568, 432, 464, 332];
let data2 = [498, 520, 568, 432, 464, 332];
let data3 = [498, 520, 568, 432, 464, 332];
// 定义加载函数
let initCharts = () => {
  let chart = echarts.init(index.value);
  let option = {
    backgroundColor: "#031d33",
    animation: true,
    grid: {
      top: "10%",
      bottom: "15%",
      left: "13%",
      right: "5%",
    },
    tooltip: {
      show: true,
      backgroundColor: "#07172c",
      textStyle: {
        color: "rgba(126,199,255,1)",
      },
    },
    xAxis: {
      data: xAxis,
      axisLine: {
        show: false, //隐藏X轴轴线
      },
      axisTick: {
        show: false, //隐藏X轴轴线
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(77, 128, 254, 0.2)",
          width: 2,
        },
      },
      axisLabel: {
        show: true,
        interval: 0,
        // margin: 14,
        fontSize: 13,
        textStyle: {
          color: "#a8d5ff", //X轴文字颜色
        },
      },
    },
    yAxis: [
      {
        type: "value",
        gridIndex: 0,
        min: 0,
        //max: 100,
        interval: 100,
        // splitNumber: 4,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(77, 128, 254, 0.2)",
            width: 2,
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(77, 128, 254, 0.2)",
          },
        },
        axisLabel: {
          show: true,
          margin: 14,
          fontSize: 13,
          textStyle: {
            color: "#a8d5ff",
          },
        },
      },
    ],
    series: [
      {
        name: "设备在线率",
        type: "bar",
        barWidth: 16,
        itemStyle: {
          normal: {
            label: {
              show: true, //开启显示
              position: "top", //在上方显示
              textStyle: {
                //数值样式
                color: "#fff",
                fontSize: 16,
              },
            },
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(146, 225, 255, 1)",
              },
              {
                offset: 1,
                color: "rgba(0, 151, 251, 1)",
              },
            ]),
          },
        },
        data: data1,
        z: 10,
        zlevel: 0,
      },
      {
        // 分隔
        type: "pictorialBar",
        itemStyle: {
          normal: {
            color: "#0F375F",
          },
        },
        symbolRepeat: "fixed",
        symbolMargin: 6,
        symbol: "rect",
        symbolClip: true,
        symbolSize: [18, 2],
        symbolPosition: "start",
        symbolOffset: [1, 1],
        data: data2,
        width: 2,
        z: 0,
        zlevel: 1,
      },
      {
        name: "外框",
        type: "bar",
        barGap: "-110%", // 设置外框粗细
        data: [100, 100, 100, 100, 100, 100, 100],
        barWidth: 16,
        itemStyle: {
          normal: {
            color: "transparent", // 填充色
            // barBorderRadius: 0, //圆角半径
            label: {
              // 标签显示位置
              show: false,
              position: "top", // insideTop 或者横向的 insideLeft
            },
          },
        },
        z: 0,
      },
      {
        name: "背影",
        type: "line",
        smooth: true, //平滑曲线显示
        showAllSymbol: false, //显示所有图形。
        symbolSize: 0,
        lineStyle: {
          width: 0,
        },
        areaStyle: {
          color: "rgba(0, 151, 251, 0.1)",
        },
        data: data3,
        z: 5,
      },
    ],
    // dataZoom: [
    //   {
    //     type: "slider",
    //     show: false,
    //     xAxisIndex: [0],
    //     endValue: 14,
    //     startValue: 0
    //   }
    // ]
  };

  chart.setOption(option, true);
  // 当窗口大小改变时候，echarts重置大小
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

// 监听当配置项发生变化的时候，调用加载函数
watch(
  () => props.carData,
  (val) => {
    if (Object.keys(val)) {
      nextTick(() => {
        initCharts();
      });
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
.index {
  width: 100%;
  height: 200px;
}
</style>
